<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Mootools Animated Image (PNG)</title>

<link  href="style.css" rel="stylesheet" type="text/css" media="screen" />

<script src="mootools-1.2.3-core.js" type="text/javascript"></script>
<script src="Awf.pngAnimation-min.js" type="text/javascript"></script>

<script type="text/javascript">
<!-- 

window.addEvent('domready',function(){

	var myAnimation = new Awf.pngAnimation('gnome-spinner.png',{
		width: 22,
		height: 22,
		rows: 5,
		cols: 7,
		fps: 10
	});
	$(myAnimation).inject($('spinner'));

});
	
// -->	
</script>


</head>
<body>

<h1>Mootools Animated Image (PNG)</h1>

<p>This is a script that creates an animated png (or gif/jpg).</p>

<h2>Demo</h2>
<div id="spinner"></div>

<h2>Example Code</h2>

<pre>
<strong>Javascript</strong>	
window.addEvent('domready',function(){
	
	var myAnimation = new Awf.pngAnimation('gnome-spinner.png',{
		width: 22,
		height: 22,
		rows: 5,
		cols: 7,
		fps: 10
	});
	$(myAnimation).inject($('spinner'));

	// With the stop method you can stop the animation, 
	// and with the start method you can start it again	 
	// myAnimation.stop();
	// $(myAnimation).destroy();

	
});
</pre>



<pre>
<strong>HTML</strong>
&lt;div id=&quot;spinner&quot;&gt;&lt;/div&gt;
</pre>
<strong>Image</strong><br />
<img src="gnome-spinner.png" alt="GNOME-Spinner" />


<h2>Download &amp; links</h2>

<ul>
	<li>Download the full uncompressed <a href="Awf.pngAnimation.js">Awf.pngAnimation.js</a> (1.3 kB)</li>
	<li>Download the minified <a href="Awf.pngAnimation-min.js">Awf.pngAnimation-min.js</a> ( &lt; 1 kB )</li>
	<li>Follow the discussion at <a href="http://www.mooforum.net/scripts12/mooanimatepng-t1137.html">Mooforum.net</a></li>
	<li>Download at <a href="http://www.esteak.net/plugin/pngAnimation">eSteak</a></li>
</ul>

<h2>Dependencies</h2>
<ul>
	<li>
		Mootools
		<ul>
			<li>Element.Style</li>
			<li>Class.Extras</li>
		</ul>
	</li>
</ul>

<h2>License</h2>
<p>
	MIT-style license.
</p>

<h2>Created By</h2>
<p>
	<a href="http://www.aryweb.nl">Aryweb Webdevelopment</a>
</p>


</body>
</html>
